<template>
  <!-- <div class="login-container">
    <div class="box">
      <h1>登录页</h1>
    </div>
  </div> -->

  <!-- 登录页组件 -->
  <div class="main">
    <div class="login-form">
      <h2 class="login-title">丫丫网后台系统登录</h2>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="name">
          <el-input v-model="ruleForm.name" id="name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="ruleForm.password"
            id="password"
            type="password"
          ></el-input>
        </el-form-item>

        <el-form-item label="验证码" prop="vcode">
          <el-input v-model="ruleForm.vcode">
            <template v-slot:append>
              <div v-html="vcodeSvg" class="vcode" @click="getVcode"></div>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item prop="keep">
          <!-- `checked` 为 true 或 false -->
          <el-checkbox
            v-model="ruleForm.checked"
            id="mdl"
            @click.native="keep($event)"
            >保留7天免登陆</el-checkbox
          >
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="loginGo"
            style="float:right"
            id="btnLogin"
            >登录</el-button
          >
          <!-- <el-button @click="gotoReg" style="float:right;margin-right:5px"
            >注册</el-button
          > -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { setToken, setUser } from "../../api/auth"; //引入cookies设置的相关方法
import userApi from "../../api/userApi";

export default {
  data() {
    return {
      vcodeSvg: "",
      ruleForm: {
        name: "",
        password: "",
        vcode: "",
        checked: false
      },
      rules: {
        name: [
          { required: true, message: "用户名不能为空", trigger: "blur" }
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" }
        ],
        vcode: [
          {
            required: true,
            message: "请填写验证码",
            trigger: "blur"
          }
        ]
      }
    };
  },

  components: {},

  methods: {
    loginGo() {
      userApi
        .userlogin(
          this.ruleForm.name,
          this.ruleForm.password,
          this.ruleForm.vcode
        )
        .then(res => {
          // console.log(res, 666);
          if (res.data.code !== 2000) {
            this.$message({
              message: "账号和密码，验证码错误",
              type: "error"
            });
          } else {
            this.$message({
              message: " 登录成功",
              type: "success"
            });

            let currentdata = {
              token: res.data.token,
              data: res.data.data
            };

            localStorage.setItem("currentUser", JSON.stringify(currentdata));
            // 把用户信息写入本地存储

            this.$router.push("/");

            console.log("redirectTo=", redirectTo);
            const { redirectTo = "/home" } = this.$route.query;
            this.$router.replace(redirectTo);
          }

          let userinf = {
            name: res.data.data[0].name,
            uid: res.data.data[0]._id,
            token: res.data.token
          };

          if (this.ruleForm.checked) {
            //需要保持7天
            setToken(res.data.token, 7);
            setUser(JSON.stringify(userinf), 7);
          } else {
            //存成会话级别:关掉浏览器就删除
            setToken(res.data.token);
            setUser(JSON.stringify(userinf));
          }
        });
    },
    keep(ev) {
      if (ev.target.tagName == "INPUT") return;
      console.log(123);
      if (!this.ruleForm.checked) {
        this.$message({
          message: "请不要在公共场合使用该功能",
          type: "error"
        });
      }
    },
    getVcode() {
      userApi.getVcode(78, 38, 50).then(res => {
        // console.log(res);
        this.vcodeSvg = res.data.data;
      });
    }
  },

  created() {
    // console.log(this.$route);
    if (this.$route.query) {
      this.ruleForm.name = this.$route.query.name;
    }
    this.getVcode();
  }
};
</script>

<style scoped lang='scss'>
//scoped:这里面的样式只在本组件生效，局部作用域
//lang设置用sass写样式
@import "../../assets/scss/login.scss";
</style>